<template>
	<view class="purchasing">
		<view class="header">
			<view class="btn">
				<!-- <navigator url="/pages/purchasing/PurchaseEntry"> -->
				<button @tap="skip('/pages/purchasing/PurchaseEntry')">采购录入</button>
				<!-- 	</navigator>
        <navigator url="/pages/purchasing/supplier"> -->
				<button @tap="skip('/pages/purchasing/supplier')">供应商</button>
				<!-- </navigator> -->
			</view>
			<view class="form">
				<view class="select">
					<view class="text">
						<text class="text-icon">*</text>
						<text class="text-name">选择供应商:</text>
					</view>
					<view class="supper">
						<input v-model="user" style="text-indent: 1em;" type="text" placeholder="请输入供应商">
						<!-- 	<picker range-key="sname" @change="supplierChange" :value="supplierListIndex"
							:range="supplierList"> -->
						<view @tap="open" class="supperBtn">
							选择
						</view>
						<view @tap="reset" class="supperBtn">重置</view>
						<!-- </picker> -->
					</view>
					<!-- <picker range-key="sname" @change="supplierChange" :value="supplierListIndex" :range="supplierList">
            <view class="select-input">
              <view class="select-input-left">
                <text v-if="supplierList && supplierList[supplierListIndex]">{{
                    supplierList[supplierListIndex].sname
                  }}</text>
                <text v-else>请选择</text>
              </view>
              <u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
            </view>
          </picker> -->
					<!-- <input type="text" placeholder="请选择供应商" /> -->
				</view>
				<view class="select">
					<view class="text">
						<text class="text-icon">*</text>
						<text class="text-name">订单日期:</text>
					</view>
					<view class="date">
						<!-- <picker mode="date" :value="query.beginTime" @change="(e) => bindDateChange(e, 'beginTime')"> -->
						<view @tap="openDatePick('beginTime')" class="select-input">
							<view class="select-input-left">
								<text v-if="query.beginTime">{{ beginTime }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
						</view>
						<!-- </picker> -->
						<view class="date-text">到</view>
						<!-- <picker mode="date" :value="query.endTime" @change="(e) => bindDateChange(e, 'endTime')"> -->
						<view @tap="openDatePick('endTime')" class="select-input">
							<view class="select-input-left">
								<text v-if="query.endTime">{{ endTime }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
						</view>
						<!-- </picker> -->
					</view>
					<view class="search_btn" @tap="search"> 查询 </view>
				</view>
			</view>
		</view>
		<view class="article">
			<table border="0">
				<tr>
					<th>供应商</th>
					<th>总金额</th>
					<!--<th>预付款</th>-->
					<th>订单日期</th>
					<th></th>
				</tr>
				<block v-if="total > 0">
					<tr @tap="skip(`/pages/purchasing/purchaseDetail?orderIdPur=${item.orderIdPur}&matId=${item.sname}`)"
						v-for="(item, index) in list" :key="index">
						<td>{{ item.sname || "-" }}</td>
						<td>
							<text class="price">{{ item.orderAmt || "-" | unifyNumber}}</text>
						</td>
						<!--<td>
							<text class="price">{{ item.preAmt || "-" | unifyNumber}}</text>
						</td>-->
						<td>{{ item.orderDay.slice(0,10) || "-" }}</td>
						<td>></td>
					</tr>
				</block>
				<tr v-else>
					<!-- #ifndef MP-WEIXIN -->
					<td colspan="7">
						<u-divider textSize="34" text="暂无数据"></u-divider>
					</td>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<td style=" position: absolute;left: 20rpx;right: 20rpx;">
						<u-divider textSize="34" text="暂无数据"></u-divider>
					</td>
					<td style="height: 164rpx;"></td>
					<td></td>
					<td></td>
					<!-- #endif -->
				</tr>
			</table>
		</view>
		<Supper ref="child" @saveUser="saveUser" />
		<myDatePick @bindDateChange="bindDateChange" mode="date" ref="myDatePick" :show.sync="showDate" />
	</view>
</template>

<script>
	import myDatePick from "../../components/myDatePick.vue";
	import Supper from "../../components/supper.vue"
	export default {
		components: {
			myDatePick,
			Supper
		},
		name: "purchasing",
		data() {
			return {
				showDate: false,
				query: {
					pageNo: 1,
					pageSize: 15,
					beginTime: "",
					endTime: "",
					sid: null // 供应商id
				},
				beginTime: "",
				endTime: "",
				list: [],
				total: 0,
				supplierList: [],
				supplierListIndex: undefined,
				sid: "",
				user: "",
			};
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.getList();
			}
		},
		onLoad() {
			// this.getList(true);
			this.supplierListApi();
		},
		onShow() {
			this.getList(true);
		},
		methods: {
			// 打开客户筛选
			open() {
				this.$refs.child.open();
			},

			reset() {
				this.sid = '';
				this.user = '';
			},
			saveUser(data) {
				this.user = data.cname;
				this.sid = data.cid;
				this.$refs.child.close();
				this.search()
			},
			openDatePick(key) {
				this.showDate = true
				this.dateKey = key
			},
			queryData() {
				this.list = []
				this.getList(true)
			},
			search() {
				if (this.user == '') {
					this.sid = ''
				}
				// this.list = []
				this.$api.orderPurchaseList({
					data: {
						pageNo: 1,
						pageSize: 999,
						sid: this.sid,
						beginTime: this.query.beginTime,
						endTime: this.query.endTime
					}
				}).then((res) => {
					this.list = res.result.list;
					this.total = res.result.total;
				});
			},
			bindDateChange(e) {
				let value = e
				let key = this.dateKey
				this[key] = value;
				if (key === "endTime") {
					value = `${value} 23:59:59`;
				} else if (key === "beginTime") {
					value = `${value} 00:00:00`;
				}
				this.query[key] = value;
				// if (this.query.endTime && this.query.beginTime) {
				// 	this.getList(true);
				// }
			},
			supplierChange(e) {
				this.supplierListIndex = e.detail.value;
				console.log(this.supplierList[this.supplierListIndex]);
				this.query.sid = this.supplierList[this.supplierListIndex].sid
				this.getList(true);
			},
			supplierListApi() {
				this.$api
					.supplierListApi({
						pageNo: 1,
						pageSize: 999,
					})
					.then((res) => {
						this.supplierList = res.result.list || [];
					});
			},
			getList(first) {
				// uni.showLoading({
				// 	title: "加载中...",
				// });

				if (this.supplierListIndex !== undefined) {
					this.query.sid = this.supplierList[this.supplierListIndex].sid;
				}

				let query = uni.$u.deepClone(this.query);
				if (first) {
					this.list = [];
					query.pageNo = 1;
				} else {
					query.pageNo += 1;
				}
				Object.keys(query).map((item) => {
					if (query[item] == '' || query[item] == null) {
						delete query[item]
					}
				});
				this.$api.orderPurchaseList({
					data: query
				}).then((res) => {
					// uni.hideLoading();
					if (res.result.list && res.result.list.length) {
						this.query.pageNo = query.pageNo;
						let list = res.result.list;
						this.list = [...this.list, ...list];
					}
					this.total = res.result.total;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.purchasing {
		.header {
			padding: 16rpx 29rpx;
			background-color: #fff;

			.btn {
				display: flex;
				justify-content: start;
				text-align: center;

				button {
					height: 80rpx;
					line-height: 80rpx;
					background: #fe3430;
					border-radius: 49rpx;
					color: #fff;
					width: 40%;
					font-size: 34rpx
				}
			}
		}

		.form {
			.select {
				.text {
					margin: 20rpx 0;
					color: #bdbdbd;

					.text-icon {
						color: #fe3430;
					}

					.text-name {
						margin-left: 10rpx;
					}
				}

				.supper {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.supperBtn {
						width: 200rpx;
						margin-left: 20rpx;
						margin-right: 10rpx;
						height: 77rpx;
						line-height: 77rpx;
						text-align: center;
						background: #fe3430;
						border-radius: 29rpx;
						color: #fff;
					}

				}

				input,
				.select-input {
					width: 100%;
					height: 94rpx;
					background: #f2f2f2;
					border-radius: 47rpx;
				}

				.select-input {
					font-size: 30rpx;
					color: #272727;
					padding: 0 36rpx;
					display: flex;
					align-items: center;

					.select-input-left {
						flex: 1;
					}
				}

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 271rpx;
					}

					text {
						text-align: left;
					}
				}
			}
		}
	}

	.date {
		width: 100%;
		display: flex;
		align-items: center;

		.date-text {
			padding: 0 24rpx;
			text-align: center;
		}

		picker {
			flex: 1;
		}
	}

	.article {
		padding: 32rpx 11rpx;

		.price {
			color: #fe3430;
		}

		table {
			border-radius: 20rpx;
			background-color: #fff;
			width: 100%;
			th {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #f1f1f1;
			}

			td {
				padding: 32rpx 0;
				text-align: center;
				border-bottom: 2rpx solid #f1f1f1;
			}
		}
	}

	.search_btn {
		background: #FE3430;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		width: 50%;
		margin: 20rpx auto;
		color: #fff;
		border-radius: 49rpx;
	}
</style>